<template>
  <div class="homeIndexBox">
    <div class="homeIndexBoxProjectRow">
      <div class="floatLeft homeIndexBoxProjectLeft">
        <div class="floatLeft homeIndexDate">
          <p class="title">欢迎使用！</p>
          <p class="title">建设项目智慧管理系统</p>
          <p v-if="nowDate" class="nowDate"> {{ nowDate }} | {{ week }}</p>
          <p v-if="hh" class="nowDatehhmfss"><span class=" m-px-r-5">{{ hh }}</span>:<span class="m-px-l-5 m-px-r-5 ">{{ mf }}</span>:<span class="m-px-l-5">{{ ss }}</span></p>
        </div>
        <div class="floatLeft statistics homeIndexQuantityStatistics">
          <p class="statisticsTitle">在建项目数量统计</p>
          <div v-show="quantityList.length>0" class="statisticsContent">
            <div class="statisticsChart floatLeft">
              <div v-if="quantityTotal>0" class="contentBg">
                <p class="nums">{{ quantityTotal }}</p>
                <p class="title">在建项目总数</p>
              </div>
              <publicPei id="publicPei" ref="publicPei" />
            </div>
            <div class="statisticsChartItem floatRight">
              <div v-for="(item,index) in quantityList" :key="index" class="statisticsListItem" :class="'statisticsListItem'+item.color">
                <span class="title">{{ item.projectAreaLabel }}片区</span>
                <span class="nums">{{ item.projectSum }}</span>
              </div>
            </div>

          </div>
          <el-empty v-if="quantityList.length===0" description="暂无项目"></el-empty>
        </div>
      </div>
      <div class="floatLeft statistics homeIndexConditionStatistics p-px-16">
        <p class="statisticsTitle">项目情况统计</p>
        <div class="statisticsContent">
          <publicBar id="publicBar" ref="publicBar" />
        </div>
      </div>
    </div>
    <div class="homeIndexBoxTaskGroupRow">
      <p class="title">工作小组</p>
      <div v-for="(item ,index) in taskGroupList" :key="index" class="floatLeft taskGroupItem" :class="['taskGroupItem'+item.bgColor,item.available===1?'cursor-pointer':'']" :style="{'margin-right':(index+1)%3===0?'0':'2.4rem'}" @click="item.available===1?taskGroupJump(item):''">
        <svg-icon class="itemImg" :icon-class="item.icon" />
        <div class="taskGroupItemBox">
          <p class="itemTitle">{{ item.name }}</p>
          <div class="itemContent">{{ item.remark }}</div>
        </div>
      </div>
    </div>
    <div class="homeIndexBoxPlanRow">
      <el-card class="box-card planItem">
        <div slot="header" class="clearfix">
          <span>安全检查计划 ({{ safePlanListTotal }})</span>
          <el-tooltip v-if="safePlanList.length>0&&engineeringAvailable" class="item" effect="dark" content="全部项目" placement="top-start">
            <el-button type="text" @click="taskGroupJump({path:'/safeBuildManagement/drawPlanList',name:'工程建设组'})">...</el-button>
          </el-tooltip>
        </div>
        <el-empty v-if="safePlanList.length===0" description="暂无数据"></el-empty>
        <div v-for="(item,index) in safePlanList" v-else :key="index" class="item">
          <div class="itemBoxL ">
            <p class="title " :class="engineeringAvailable?'cursor-pointer':''" @click="engineeringAvailable?taskGroupJump({path:'/safeBuildManagement/drawPlanList',name:'工程建设组','id':item.id}):''">{{ item.planTypeLabel }} ({{ item.checkTypeLabel }})</p>
            <p class="content" :title=" item.projectRangeStatus===1?'所有项目':item.projectName">项目范围：{{ item.projectRangeStatus===1?'所有项目':item.projectName }}</p>
          </div>
          <div class="itemBoxDate ">
            <span>截止日期 </span>
            <span>{{ item.completionDeadline }}</span>
          </div>
        </div>

      </el-card>
      <el-card class="box-card planItem m-px-l-24">
        <div slot="header" class="clearfix">
          <span>质量检查计划 ({{ qualityPlanListTotal }})</span>
          <el-tooltip v-if="qualityPlanList.length>0&&engineeringAvailable" class="item" effect="dark" content="全部项目" placement="top-start">
            <el-button type="text" @click="taskGroupJump({path:'/qualityControl/drawPlanList',name:'工程建设组'})">...</el-button>
          </el-tooltip>
        </div>
        <el-empty v-if="qualityPlanList.length===0" description="暂无数据"></el-empty>
        <div v-for="(item,index) in qualityPlanList" :key="index" class="item">
          <div class="itemBoxL ">
            <p class="title " :class="engineeringAvailable?'cursor-pointer':''" @click="engineeringAvailable?taskGroupJump({path:'/qualityControl/drawPlanList',name:'工程建设组','id':item.id}):''">{{ item.planTypeLabel }} ({{ item.checkTypeLabel }})</p>
            <p class="content" :title=" item.projectRangeStatus===1?'所有项目':item.projectName">项目范围：{{ item.projectRangeStatus===1?'所有项目':item.projectName }}</p>
          </div>
          <div class="itemBoxDate ">
            <span>截止日期 </span>
            <span>{{ item.completionDeadline }}</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { methodGetApi } from '@/api/publicApi'
import { commonMixins } from '@/mixins/publicMixins/commonMixins'
import publicBar from './components/publicBar'
import publicPei from './components/publicPei'
import bus from '@/utils/commonUtils/eventBus.js'
export default {
  name: 'Index',
  components: { publicBar, publicPei },
  mixins: [commonMixins],
  data() {
    return {
      engineeringAvailable: false,
      taskGroupList: [],
      quantityTotal: 0,
      quantityList: [],
      color: ['#F7B500', '#0091FF', '#46CBD7'],
      qualityPlanListTotal: 0,
      qualityPlanList: [],
      safePlanListTotal: 0,
      safePlanList: [],
      nowDate: null,
      week: null,
      hh: null,
      mf: null,
      ss: null
    }
  },
  mounted() {
    // if (this.$store.state.user.userInfo.isWeakPassword) {
    //   alert('请修改初始密码')
    // }
    const that = this
    setInterval(() => { that.time() }, 1000)
    this.getWorkGroupVoFun()
    this.getProjectQuantityFun()
    this.getProjectInfoStatisticsFun()
    this.qualityPlanPageFun()
    this.safePlanPageFun()
  },
  methods: {
    /**
     * @description: 修改原始密码
     * @Author: baoxuhui
     * @return {*}
     */
    isWeakPasswordFun() {
      console.log(this.$store.state.user.userInfo.isWeakPassword)
      if (this.$store.state.user.userInfo.isWeakPassword && localStorage.getItem('isWeakPasswordNum') == '0') {
        this.$confirm('请修改初始密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bus.$emit('isWeakPasswordBus', true)
          localStorage.setItem('isWeakPasswordNum', 1)
        }).catch(() => {
          localStorage.setItem('isWeakPasswordNum', 1)
        })
      }
    },
    /**
     * @description: 跳路由
     * @Author: baoxuhui
     * @return {*}
     */
    taskGroupJump(item) {
      console.log(item)
      localStorage.setItem('menuKey', item.name)
      this.$store.dispatch('deleteRoutes')
      this.$store.dispatch('user/GetInfo', item.name).then(res => {
        this.$store.dispatch('GenerateRoutes', item.name).then(accessRoutes => {
          console.log(accessRoutes)
          // 根据roles权限生成可访问的路由表
          this.$router.addRoutes(accessRoutes) // 动态添加可访问路由表
          this.$router.push({ path: item.path })
        })
      })
    },
    /**
       * @description: 获取时间
       * @Author: baoxuhui
       * @return {*}
       */
    time() {
      this.nowDate = this.getTimeDate('year-month-date')
      this.week = this.getTimeDate('week')
      this.hh = this.getTimeDate('hh')
      this.mf = this.getTimeDate('mf')
      this.ss = this.getTimeDate('ss')
    },
    /**
     * @description: 工作小组
     * @Author: baoxuhui
     * @return {*}
     */
    getWorkGroupVoFun() {
      const url = '/system/role/getWorkGroupVo'
      methodGetApi(url).then(res => {
        res.data.forEach(element => {
          if (element.roleId === 52 || element.roleId === 56) {
            element.bgColor = 'F0F4FF'
          }
          if (element.roleId === 53 || element.roleId === 55) {
            element.bgColor = 'F0FBEF'
          }
          if (element.roleId === 54) {
            element.bgColor = 'ECF9FE'
          }
          if (element.roleId === 52 && element.available === 1) { this.engineeringAvailable = true }
        })
        this.taskGroupList = res.data
        this.isWeakPasswordFun()
      })
    },
    /**
     * @description: 项目数量统计
     * @Author: baoxuhui
     * @return {*}
     */
    getProjectQuantityFun() {
      this.quantityTotal = 0
      const url = '/project-info/getProjectQuantity'
      methodGetApi(url).then(res => {
        const data = {
          dataSeries: []
        }
        res.data.forEach((element, index) => {
          this.quantityTotal += element.projectSum
          element.color = this.color[index].substring(1, this.color[index].length)
          data.dataSeries.push({
            value: element.projectSum,
            name: element.projectAreaLabel

          })
        })
        this.quantityList = res.data
        if (res.data.length > 0) {
          this.$refs['publicPei'].dataBool = true
          this.$nextTick(() => {
            this.$refs['publicPei'].initECharts(data, this.color)
          })
        } else {
          this.$refs['publicBar'].dataBool = false
        }
      })
    },
    /**
     * @description: 项目情况统计
     * @Author: baoxuhui
     * @return {*}
     */
    getProjectInfoStatisticsFun() {
      const url = '/project-info/getProjectInfoStatistics'
      methodGetApi(url).then(res => {
        if (res.data.projectTypeList.length > 0) {
          this.$refs['publicBar'].dataBool = true
          this.$nextTick(() => {
            this.$refs['publicBar'].initECharts(res.data)
          })
        } else {
          this.$refs['publicBar'].dataBool = false
        }
      })
    },
    /**
     * @description: 质量检查计划
     * @Author: baoxuhui
     * @return {*}
     */
    qualityPlanPageFun() {
      const url = '/quality-plan/getPage'
      const data = {
        pageNum: 1, // 分页的初始值
        pageSize: 4, // 每页的显示数\
        completionStatus: 0 // 完成情况：0未完成，1已完成
      }
      methodGetApi(url, data).then(res => {
        this.qualityPlanList = res.rows
        this.qualityPlanListTotal = res.total
      })
    },
    /**
     * @description: 安全文明施工检查计划
     * @Author: baoxuhui
     * @return {*}
     */
    safePlanPageFun() {
      const url = '/safe-plan/getPage'
      const data = {
        pageNum: 1, // 分页的初始值
        pageSize: 4, // 每页的显示数
        completionStatus: 0 // 完成情况：0未完成，1已完成
      }
      methodGetApi(url, data).then(res => {
        this.safePlanList = res.rows
        this.safePlanListTotal = res.total
      })
    }
  }

}
</script>
<style lang="scss" >

@import "~@/assets/styles/publicStyles/Hlstyle.scss";
@import "~@/assets/styles/publicStyles/mixin.scss";

//首页--------------------------------------------
.homeIndexBox{
    .homeIndexBoxProjectRow{
        height: 33.2rem;
        width: 100%;
        &::after{
            @include mixinClearfix()
        }
        .homeIndexBoxProjectLeft{
            width:76.8rem ;
            height: 100%;
            background: #fff;
            padding: 2.4rem;
        }
        .homeIndexDate{

            width: 24rem;
            height: 29.4rem;
            // background: url('~@/assets/images/indexHomeDate.png');
            // background-size: cover;
            padding: 6.3rem 0;
            text-align: center;
             color:$navBar-color ;
            .title{
                font-size: calc(#{$primary-fontSize + 0.6rem});
                line-height:3.2rem ;

            }
            .nowDate{
                 font-size:$primary-fontSize;
                 margin-top: 3.2rem;
            }
            .nowDatehhmfss{
                    font-size: calc(#{$primary-fontSize + 1rem});
                      margin-top: 1.5rem;
                    span{
                         display: inline-block;
                      width: 3.6rem;
                        height: 3.3rem;
                        line-height: 3.3rem;
                        background: rgba(0,0,0,0.5);
                    }
            }
        }
        .statistics{
             .statisticsTitle{
                font-size: calc(#{$primary-fontSize + 0.2rem});
                line-height: 2.4rem;
                color: rgba(0,0,0,0.85);
                font-weight: bold;
            }
            .statisticsContent{
                height: calc(100% - 2.4rem);
                .statisticsChart{
                    width:21rem ;
                    height: 100%;
                    position: relative;
                       .contentBg{
                        width: 100%;
                        height:100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        align-items: center;
                        align-content: center;
                        .title{
                            text-align: center;
                            width: 100%;
                            color: rgba(0, 0, 0, 0.45);
                            font-size: calc(#{$primary-fontSize});
                        }
                        .nums{
                            text-align: center;
                            width: 100%;
                            font-size: calc(#{$primary-fontSize + 1.8rem});
                            font-weight:bold ;
                        }
            }
                }
                .statisticsChartItem{
                    width: calc(100% - 21rem - 3.6rem);
                     height: 100%;
                        .statisticsListItem{
                        width: 100%;
                        height:calc( 33.33% - 2.4rem);
                        font-size: $primary-fontSize ;
                        margin-top:2.4rem ;
                        display: flex;
                        align-items: center;
                        padding: 0 1.4rem;

                        .title{
                            color: #5F6A7A;
                            text-align: left;
                            width: calc(100% - 10rem);
                        }
                        .nums{
                            width: 10rem;
                            font-weight:bold ;
                            text-align: right;
                            font-size: 3.2rem;
                        }
                    }
                    .statisticsListItemF7B500{
                        border-left:2px solid #F7B500;
                      background: linear-gradient(135deg, #FFF1F0 0%, #FFFFFF 100%);
                        .nums{
                            color:#F7B500 ;
                        }
                    }
                     .statisticsListItem0091FF{
                     border-left:2px solid #0091FF;
                      background:linear-gradient(135deg, #E1F1FF 0%, #FFFFFF 100%);;
                        .nums{
                            color:#0091FF ;
                        }
                    }
                     .statisticsListItem46CBD7{
                         border-left:2px solid #46CBD7;
                         background:linear-gradient(135deg, #DDFCFF 0%, #FFFFFF 100%);
                        .nums{
                            color:#46CBD7 ;
                        }
                    }
                }
            }
        }
        .homeIndexQuantityStatistics{
            width:calc(100% - 24rem - 24px);
            height: 100%;
            background: $primary-bg;
            margin-left: 24px;

        }
        .homeIndexConditionStatistics{
            width: calc(100% - 76.8rem - 24px);
            height: 100%;
            background: $primary-bg;
            margin-left: 24px;
        }

    }
    .homeIndexBoxTaskGroupRow{
        height: 39.6rem;
        width: 100%;
        background: $primary-bg;
        margin-top: 24px;
        position: relative;
        padding: 0 24px ;

        .title{
            font-size: calc(#{$primary-fontSize + 0.2rem});
            padding: 2.4rem 0;
        }
        .taskGroupItem{

            width: calc(33.33% - 2.4rem + 0.8rem);
            height:14rem;
            border-radius: 2px;
            border: 1px solid #E9E9E9;
            padding:2rem 2.4rem;
            transition: all 0.2s linear;
            margin-bottom: 2.4rem;
            display: flex;
            align-items:flex-start;
            flex-wrap: nowrap;
            flex-direction: row;
            justify-content: flex-start;
            position: relative;
            overflow: hidden;
             &::before{
                content: '';
                width: 8.6rem;
                height: 7.6rem;
                position: absolute;
                top: -20px;
                right: -20px;
                border-radius: 100%;
            }

            .itemImg{
               width:  4.9rem;
               height: 4.8rem;

            }
            .taskGroupItemBox{
                margin-left: 2.4rem;
                width: calc(100% - 4.9rem - 2.4rem);
                .itemTitle{
                    font-size: calc(#{$primary-fontSize + 0.4rem});
                    color: rgba(0,0,0,0.85);
                    padding:0 0  1.1rem 0 ;
                }
            .itemContent{
                font-size:calc(#{$primary-fontSize});
                color: rgba(0,0,0,0.45);
            }

            }
            &:hover{
                .taskGroupItemBox{
                    .itemContent, .itemTitle{
                           color: #000;
                    }
                }

            }
        }
        .taskGroupItemF0F4FF{
            background: #F0F4FF;
              border: 1px solid #F0F4FF;
            &::before{
                background: #EBEFFF;
            }
            &:hover{
                border: 1px solid #3370ff;
            }
        }
        .taskGroupItemF0FBEF{
            background: #F0FBEF ;
             border: 1px solid #F0F4FF;
            &::before{
                background: #E2F7E0;
            }
            &:hover{
                border: 1px solid #40C724;
            }
        }
        .taskGroupItemECF9FE{
            background: #ECF9FE ;
             border: 1px solid #ECF9FE;
            &::before{
                background: #E3F6FD;
            }
            &:hover{
                border: 1px solid #45c0ff;
            }
        }
       &::after{
            @include mixinClearfix()
        }
    }
    .homeIndexBoxPlanRow{
        height: 36.8rem;
        width: 100%;
        margin-top:24px ;
        display: flex;
        .planItem{
            width: calc(50% - 12px);
            height: 100%;
            padding: 24px 0;
              border: 0px solid;
            .el-card__header{
                  font-size: calc(#{$primary-fontSize + 0.2rem});
                  padding: 0px 24px;
                  border: 0px solid;
                  color: rgba(0,0,0,0.85);
                  .el-button{
                    padding: 0;
                    line-height: 1rem;
                    float: right;
                      font-size:  calc(#{$primary-fontSize + 0.2rem})!important;
                    &:hover{
                        color:#1890FF;
                    }
                  }
            }
            .el-card__body{
                padding:0px ;
                overflow: hidden;
                .item{
                    width: 100%;
                    padding: 1.6rem 24px;
                    border-bottom: 1px solid $primary-border-color;
                    display: flex;
                    align-items: center;
                    color: rgba(0,0,0,0.45);
                    font-size: $primary-fontSize;
                    &:last-child{
                        border: 0px solid;
                        padding: 1.6rem 24px 0px;
                    }
                    .itemBoxL{
                      width:calc(100% - 14rem);
                      .title,.content{
                            width: 100%;
                            @include mixinEllipsis();
                      }
                       .title{
                        font-size: calc(#{$primary-fontSize} + 2px);
                        margin-bottom: 0.8rem;
                        color:rgba(0, 0, 0, 0.85) ;
                       &:hover{
                            color: #1890FF
                       }

                      }
                    }
                    .itemBoxDate{
                        text-align: right;
                        width:14rem;
                    }

                }

            }
        }
        .el-card{
          border-radius: 0px;
        }
    }
}
</style>

